<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" alt />
          <div class="userinfo">
            <p class="name">Nick</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            上次登录时间：
            <span>2020-09-04</span>
          </p>
          <p>
            上次登录地点：
            <span>北京</span>
          </p>
        </div>
      </el-card>
      <div class="graph">
        <el-card shadow="hover">
          <echart style="height: 280px" :chartData="echartData.user"></echart>
        </el-card>
      </div>
    </el-col>
    <el-col :span="16">
      <el-card shadow="hover">
        <div class="num">
          <el-table
            :data="tableWaringData"
            height="300px"
            stripe
            v-loading="config.loading"
          >
            <el-table-column label="序号" width="85">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  (config.page - 1) * 20 + scope.$index + 1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              v-for="item in activityLabel"
              :key="item.prop"
              :label="item.label"
            >
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row[item.prop]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
          <footer>
            <span>总过期未完成事务数：{{tableWaringData.length}}</span>
            <el-button style="float:right"><a href="http://localhost:3333/#/video">查看具体</a></el-button>
          </footer>
      </el-card>
    </el-col>
    <el-col :span="16">
      <p style="color: black">简易编辑器</p>
      <editor
        apiKey="sg12zjr8q1x033q5c492c4afofgfk0xwwxv6ltm69nper2d7"
        initialValue="<p>Initial editor content</p>"
        :init="{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap',
            'searchreplace visualblocks code fullscreen',
            'print preview anchor insertdatetime media',
            'paste code help wordcount table',
          ],
          toolbar:
            'undo redo | formatselect | bold italic | \
        alignleft aligncenter alignright | \
        bullist numlist outdent indent | print | help',
        }"
      >
      </editor>
    </el-col>
  </el-row>
</template>

<script>
import Echart from "../../components/EChart";
import Editor from "@tinymce/tinymce-vue";
Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
    }
  }
  return fmt;
};
export default {
  components: {
    Echart,
    editor: Editor,
  },
  data() {
    return {
      userImg: require("../../assets/images/user.png"),
      tableData: [],
      activityData: [],
      tableWaringData: [],
      tableLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
      config: {
        page: 1,
        total: 30,
        loading: false,
      },
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
      activityLabel: [
        {
          prop: "title",
          label: "标题",
        },
        {
          prop: "activityContext",
          label: "内容",
        },
        {
          prop: "deadline",
          label: "截止日期",
          width: 200,
        },
        {
          prop: "type",
          label: "类型",
        },
      ],
      typeOptions: [
        {
          label: "通知",
          value: 0,
        },
        {
          label: "缴费",
          value: 1,
        },
        {
          label: "开会",
          value: 2,
        },
        {
          label: "申请",
          value: 3,
        },
        {
          label: "外出",
          value: 4,
        },
      ],
    };
  },
  methods: {
    getTableData() {
      this.$http.get("/home/getData").then((res) => {
        console.log(res.data);
        res = res.data;
        this.tableData = res.data.tableData;
        // 订单折线图
        const order = res.data.orderData;
        this.echartData.order.xData = order.date;
        // 第一步取出series中的name部分——键名
        let keyArray = Object.keys(order.data[0]);
        // 第二步，循环添加数据
        keyArray.forEach((key) => {
          this.echartData.order.series.push({
            name: key === "wechat" ? "小程序" : key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // 绘制bar图
        // 第一步取出series中的name部分——键名
        this.echartData.user.xData = res.data.userData.map((item) => item.date); // 遍历每一项，取出来key值
        this.echartData.user.series.push({
          // 给series喂数据
          name: "新增用户",
          data: res.data.userData.map((item) => item.new),
          type: "bar",
        });
        this.echartData.user.series.push({
          name: "活跃用户",
          data: res.data.userData.map((item) => item.active),
          type: "bar",
          barGap: 0, // 两个柱状图之间的间隔
        });

        // video 饼图
        this.echartData.video.xData = res.data.videoData.map(
          (item) => item.name
        ); // 遍历每一项，取出来key值
        this.echartData.video.series.push({
          // data: res.data.videoData.map((item) => item.value),
          data: res.data.videoData,
          type: "pie",
        });
      });
    },
    formatDate(value) {
      var date = new Date(value).format("yyyy-MM-dd");
      return date;
    },
    getList(title = "") {
      console.log(title);
      this.config.loading = true;
      title ? (this.config.page = 1) : "";
      this.$http
        .get("/api/activity/getActivity", {
          params: {
            page: this.config.page,
            title,
          },
        })
        .then((res) => {
          this.activityData = res.data.list.map((item) => {
            let d1 = new Date(2000, 1, 1).format("yyyy-MM-dd");
            item.completedLabel = item.completed === 0 ? "未完成" : "已完成";
            if (d1.valueOf() < item.deadline.valueOf()) {
              item.status = "未过期";
              return item;
            } else if (d1.valueOf() == item.deadline.valueOf()) {
              item.status = "即将过期";
              return item;
            } else {
              item.status = "已过期";
              if (item.completedLabel == "未完成") {
                this.tableWaringData.push(item);
              }
              return item;
            }
          });
          for (let index = 0; index < this.activityData.length; index++) {
            const typeNumber = Math.floor(Math.random() * 5);
            for (let index1 = 0; index1 < this.typeOptions.length; index1++) {
              if (typeNumber == this.typeOptions[index1].value) {
                this.activityData[index].type = this.typeOptions[index1].label;
              }
            }
          }
          this.config.total = res.data.count;
          this.config.loading = false;
        });
    },
  },
  created() {
    this.getTableData();
    this.getList();
  },
  mounted() {
    // this.$http.get('/home/getData').then((res) => {
    //   console.log(res.data)
    // })
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/home";
</style>
